<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>回顾筛选-思多客</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/m/public.css">
    <link rel="stylesheet" href="/public/css/m/filter.css">
</head>

<body>
    <div class="n-page">
        <div id="header"></div>
        <div class="content">
            <div id="nav"></div>
            <div class="filter-tab-type flex">
                <div>状态筛选</div>
                <span data-type="alias" data-status="true">使用化名</span>
                <span data-type="realName" data-status="true">实名认证</span>
                <span data-type="educationalBackground" data-status="true">学历认证</span>
                <span data-type="certificate" data-status="true">证书审核</span>
            </div>
            <div class="select-box flex">
                <span class="current-condi" data-opts="SENTIMENT">人气指数</span>
                <span data-opts="CORRECT1">上期战绩</span>
                <span data-opts="CORRECT5">平均战绩</span>
                <span data-opts="EXCEPTIONAL">打赏次数</span>
            </div>
            <div class="clearfix" id="J_teacher_list"></div>
            <div class="click-load">加载更多</div>
        </div>
        <div id="footer"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/public/js/m/fontResize.js"></script>
    <script src="/public/lib/layer/layui.js"></script>
    <script src="/public/js/G.js"></script>
    <script src="/public/js/user.js"></script>
    <script src="/public/js/product.js"></script>
    <script src="/public/js/productOrder.js"></script>
    <script src="/public/js/rechargeApi.js"></script>
    <script src="/public/js/rechargeOrder.js"></script>
    <script src="/public/js/teacher.js"></script>
    <script src="/public/js/attention.js"></script>
    <script src="/public/js/m/public.js"></script>
    <script id="J_teacher_list_tpl" type="text/html">
        {{# d.list.forEach(function(val,index){ }}
        <a class="report-item-1" href="/m/teacher-msg.html?tid={{val.userId}}">
            <div class="report-body-top clearfix">
                <img class="m-teacher-icon fl" src="/{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.userId}}.png" alt="">
                <div class="m-report-info fl">
                    <h4 class="m-report-teacher-name">{{val.base.aliasName?val.base.aliasName:val.base.name}}</h4>
                    <p class="m-focus">{{val.extend.sentiment}}人关注</p>
                    <p class="m-focus">{{val.extend.exceptionalNumber}}人打赏</p>
                </div>
                <p class="top-right-tips {{val.certification.recommend?'show':'hide'}}"><span>推荐</span></p>
            </div>
            <div class="report-body-bottom clearfix center m-download-num">平均战绩:<b>{{formatVal(val.correct5)}}%</b>上期战绩:<b>{{formatVal(val.correct1)}}%</b></div>
        </a>
        {{# }); }}
    </script>
</body>
<script>
$('.filter-tab-type span').click(function() {
    var isClick = $(this).hasClass('filter-type-active');
    if (isClick) {
        $(this).removeClass('filter-type-active')
    } else {
        $(this).addClass('filter-type-active')
    }
})
$('.select-box span').click(function() {
    var isCurrent = $(this).hasClass('filter-type-active');
    if (!isCurrent) {
        $(this).siblings('.current-condi').removeClass('current-condi')
        $(this).addClass('current-condi')
    }
})

layui.use('laytpl', function() {
    var laytpl = layui.laytpl;

    var teacherParams = {
        count: 0,
        pageId: 1,
        pageSize: 10,
        orderRule: 'SENTIMENT'
    };
    var isInit = true;

    function getTeacherList(params) {
        loading.open()
        teacher.getList(params, function(data) {
            console.log(data)
            laytpl($('#J_teacher_list_tpl').html()).render(data, function(html) {
                if (isInit) {
                    $('#J_teacher_list').html(html)
                } else {
                    $('#J_teacher_list').append(html)
                }
            })
            teacherParams.count = data.count;
            if (teacherParams.pageId == (Math.ceil(teacherParams.count / teacherParams.pageSize))) {
                $(".click-load").hide();
            }
            lazyload()
            loading.close()
        })
    }
    getTeacherList(teacherParams)

    //老师状态
    $(document).on('click', '.filter-tab-type span', function() {
        var type = $(this).data('type');
        var status = $(this).data('status');
        var html = $(this).html();
        isInit = true;
        teacherParams.pageId = 1;
        $(".click-load").show();
        if (!teacherParams['' + type + '']) {
            teacherParams['' + type + ''] = status;
        } else {
            delete teacherParams['' + type + ''];
        }
        getTeacherList(teacherParams)
    })

    //排序指标
    $(document).on('click', '.select-box span', function() {
        if (!$(this).hasClass('current-condi')) {
            $(this).addClass('current-condi');
            $(this).siblings('.current-condi').removeClass('current-condi')
        }
        isInit = true;
        teacherParams.pageId = 1;
        $(".click-load").show();
        var opts = $(this).data('opts')
        teacherParams.orderRule = opts;
        getTeacherList(teacherParams)
    })

    //加载更多
    $(".click-load").click(function() {
        teacherParams.pageId++;
        isInit = false;
        getTeacherList(teacherParams)
    })

});
</script>

</html>